<template>
	<radio-group :name="defaultValue" class="c-radio-group" @change="handleChange">
		<slot></slot>
	</radio-group>
</template>

<script setup>
	import { getCurrentInstance, provide, ref, watchEffect } from 'vue';
	
	const props = defineProps({
		modelValue: String,
		value: String
	});
	
	const defaultValue = ref('')
	
	watchEffect(() => {
		if(!props.modelValue) {
			defaultValue.value = props.value
		} else {
			defaultValue.value = props.modelValue
		}
	})

	const instance = getCurrentInstance().proxy;
	
	provide('instatnce', instance);

	const emits = defineEmits(['update:modelValue', 'change']);

	function handleChange(e) {
		emits('update:modelValue', e.detail.value);
		emits('change', e.detail.value);
	}
</script>

<style lang="scss">
	.c-radio-group {
	}
</style>
